<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.container{
			width: 700px;
			border: 1px red solid;
			margin: 20px auto;
		}
		.container nav{
			height: 50px;
			display: flex;
		}
		a{
			display: block;
			flex: 1;
			text-align: center;
			line-height: 50px;
			text-decoration: none;
			color: #333;
		}
		.content div{
			height: 350px;
			color: #333;
			font-size: 30px;
			text-align: center;
			line-height: 150px;
			display: none;
		}
		.content .show{
			display: block;
		}
		.active{
			background: #333;
			color: #fff;
		}

	</style>
</head>
<body>
	<div align="center">tab选项卡</div>
	<div class="container">
	<nav>
		<a href="#" class="active">第一个</a>
		<a href="#">第二个</a>
		<a href="#">第三个</a>
		<a href="#">第四个</a>
	</nav>
	<div class="content">
		<div class="show">第一个内容</div>
		<div class="">第2个内容</div>
		<div class="">第3个内容</div>
		<div class="">第4个内容</div>
	</div>
	</div>
</body>
<script>
	//获取页面中的所有a标签
	var a=document.getElementsByTagName('a');
	var content=document.getElementsByClassName('content')[0];//获取数组索引号为0的元素；
	var box= content.getElementsByTagName('div');
	//获取content中所有div标签；

for(var i=0;i<a.length;i++){//遍历a标签
a[i].title=i;//为每个a标签绑定index属性，值为当前a标签的索引；
a[i].onclick = function(){
	for(var j=0;j<a.length;j++){
		a[j].className='';
		box[j].className='';
	}
	this.className='active';
	box[this.title].className='show';
}
}
</script>
